<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputScript library="javaScript" name="adaptive.js"/>
        <script>
            let DEVICE_FLAG = judgeDevice();

            let head = document.getElementsByTagName('head');
            let link1 = document.createElement("link");
            let link2 = document.createElement("link");
            let link3 = document.createElement("link");

            if (DEVICE_FLAG === 1 || DEVICE_FLAG === 2)
            {
                link1.href = "../../resources/css/loginM.css";
                link1.rel = "stylesheet";
                link1.type = "text/css";

                link2.href = "../../resources/css/defaultM.css";
                link2.rel = "stylesheet";
                link2.type = "text/css";

                link3.href = "../../resources/css/cssLayoutM.css";
                link3.rel = "stylesheet";
                link3.type = "text/css";
            }
            if (DEVICE_FLAG === 3)
            {
                link1.href = "../../resources/css/login.css";
                link1.rel = "stylesheet";
                link1.type = "text/css";

                link2.href = "../../resources/css/default.css";
                link2.rel = "stylesheet";
                link2.type = "text/css";

                link3.href = "../../resources/css/cssLayout.css";
                link3.rel = "stylesheet";
                link3.type = "text/css";
            }
            head[0].appendChild(link1);
            head[0].appendChild(link2);
            head[0].appendChild(link3);

        </script>

        <!--        <h:outputStylesheet library='css' name='login.css'/>
                <h:outputStylesheet library='css' name='default.css'/>
                <h:outputStylesheet library='css' name='cssLayout.css'/>-->

        <link rel="shortcut icon" type="image/x-icon" href="#{publicFields.icon}"/>
        <title>#{messages.Login}</title>
    </h:head>

    <h:body>
        <div class ="main" >
            <div class ="main_body">
                <div class ="logo" >
                    <h:graphicImage library="images" name="logo.gif"/>
                </div>
                <div class ="loingcontent" align="center">
                    <h:panelGroup>
                        <h:messages errorStyle="color: red" infoStyle="color: green" layout="table" styleClass="message"/>
                    </h:panelGroup>
                    <h:form styleClass="jsfcrud_list_form" id="myForm1">  
                        <h:panelGrid columns="3" rendered="#{checkLogin.rendered}" >
                            <h:outputLabel  value="#{messages.Account}"/>
                            <h:inputText  id="userid" value="#{checkLogin.user.name}" required="true"  requiredMessage="#{messages.Name}" />
                            <h:outputLabel/>
                            <h:outputLabel  value="#{messages.Password}"/>
                            <h:inputSecret  id="password" value="#{checkLogin.user.password}" required="true" requiredMessage="#{messages.Password}"/>
                            <h:outputLabel/>
                            <c:if test="#{checkLogin.showCode()}">
                                <h:outputLabel value="#{messages.Validate}#{messages.Code}"/>
                                <h:inputText id="validatorCode"  value="#{checkLogin.rand}" required="true"  requiredMessage="#{messages.InputValCode}"/>
                                <img src="../../resources/images/image.jsp"/>
                            </c:if>
                            <h:outputLabel value="#{messages.Role}"/>
                            <h:selectOneMenu id="selectRole" value="#{checkLogin.roleinfo}"  required="true">
                                <f:selectItem itemLabel="#{messages.Please} #{messages.Select}"/>
                                <f:selectItems value="#{roleinfoControllerA.allSet}" var="role" itemLabel="#{messages.getString(role.rolename)}"/>
                                <f:ajax render="loginButton"/>
                            </h:selectOneMenu>
                            <h:outputLabel/>
                            <h:outputLabel/>
                        </h:panelGrid>
                        <h:panelGrid columns="2" id="loginButton" >
                            <c:if test="#{checkLogin.roleinfo!=null}" >
                                <h:commandButton id="mySubmit" action="#{checkLogin.validateUser}" value="#{messages.Login}" disabled="#{!checkLogin.loginButtonSwitch.status}"/>
                            </c:if>
                        </h:panelGrid>
                        <h:outputLabel  rendered="#{!checkLogin.rendered}" >#{messages.TryFaild}</h:outputLabel>
                    </h:form>
                </div>
            </div>
        </div>
    </h:body>
</ui:composition>
